<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="utf-8">
<!-- start: Mobile Specific -->
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- end: Mobile Specific -->
	
	<!-- start: CSS -->
	<link id="bootstrap-style" href="css/bootstrap.css" rel="stylesheet">
	<link id="bootstrap-style" href="css/bootstrap-treeview.css" rel="stylesheet">
	<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
	<link id="base-style" href="css/style.css" rel="stylesheet">
	<link id="base-style-responsive" href="css/style-responsive.css" rel="stylesheet">
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>
	<!-- end: CSS -->
</head>
  <body>
  	<div style="background: #1C2B36;margin-left: 0px !important;width: 100%;height: 100%" class="span2">
	<div class="nav-collapse sidebar-nav">
 <div id="tree"></div>
					
					</div></div>
  </body>
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="js/bootstrap-treeview.js"></script>
<script type="text/javascript">
function getTree() {
    // Some logic to retrieve, or generate tree structure
	 var tree = [{
     text: "Parent 1",
     nodes: [{
      text: "Child 1",
      nodes: [{
       text: "Grandchild 1"
      }, {
       text: "Grandchild 2"
      }]
     }, {
      text: "Child 2"
     }]
    }, {
     text: "Parent 2"
    }, {
     text: "Parent 3"
    }, {
     text: "Parent 4"
    }, {
     text: "Parent 5"
    }];
    return tree;
    
}
$('#tree').treeview({    data: getTree()});</script>
</html>